<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <a href>
          <img class="w-100" src="../assets/images/4c6f865f3ec17d0ae57cde4ee9160c1f.jpeg" alt />
        </a>
      </swiper-slide>
      <swiper-slide>
        <a href>
          <img class="w-100" src="../assets/images/c7ec5131db928f52bbaece680dbed827.jpeg" alt />
        </a>
      </swiper-slide>
      <swiper-slide>
        <a href>
          <img class="w-100" src="../assets/images/d16883cfecc4935aa96ab6b9d0fc33ac.jpeg" alt />
        </a>
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-4 pb-2" slot="pagination"></div>
    </swiper>
    <!-- end of swiper -->
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-grey-1">
      <div class="flex flex-wrap">
        <div class="nav-item mb-3" v-for="n in 10" :key="n">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料站</div>
        </div>
      </div>
      <div class="bg-light py-2 flex flex-ai-center flex-jc-center">
        <i class="sprite sprite-arrow mr-1"></i>
        收起
      </div>
    </div>
    <!-- end of nav icons -->
    <m-card icon="menu" title="新闻资讯" :categories="newsCats">
      <template #items="{category}">
        <ul>
          <router-link
            tag="li"
            :to="`/articles/${item._id}`"
            class="py-2 flex"
            v-for="(item, index) in category.newsList"
            :key="index"
          >
            <span class="text-info">[{{ item.categoryName }}]</span>
            <span>丨</span>
            <span class="flex-1 text-dark-1 text-ellipsis pr-2">
              {{
              item.title
              }}
            </span>
            <span class="time text-grey fs-md">
              {{
              item.createdAt | date
              }}
            </span>
          </router-link>
        </ul>
      </template>
    </m-card>
    <m-card icon="card-hero" title="英雄列表" :categories="heroCats">
      <template #items="{category}">
        <ul class="flex flex-wrap" style="margin:0 -0.5rem">
          <router-link
            :to="`/heroes/${item._id}`"
            tag="li"
            class="text-center p-2 fs-md"
            style="width:20%"
            v-for="(item, index) in category.heroList"
            :key="index"
          >
            <img :src="item.avatar" width="100%" />
            <div>{{item.name}}</div>
          </router-link>
        </ul>
      </template>
    </m-card>
    <m-card icon="card-menu" title="精彩视频"></m-card>
    <m-card icon="card-menu" title="图文攻略"></m-card>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  filters: {
    date(val) {
      return dayjs(val).format("MM/DD");
    }
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".pagination-home"
        }
      },
      newsCats: [],
      heroCats: []
    };
  },
  methods: {
    async fetchNewsCats() {
      const res = await this.$http.get("news/list");
      this.newsCats = res.data;
    },
    async fetchHeroCats() {
      const res = await this.$http.get("heroes/list");
      this.heroCats = res.data;
    }
  },
  created() {
    this.fetchNewsCats();
    this.fetchHeroCats();
  }
};
</script>

<style lang="scss">
@import "../assets/style/variables";

.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, "white");
    &.swiper-pagination-bullet-active {
      background: map-get($colors, "info");
    }
  }
}
.nav-icons {
  border-top: 1px solid map-get($colors, "border");
  border-bottom: 1px solid map-get($colors, "border");
  .nav-item {
    width: 25%;
    border-left: 1px solid map-get($colors, "border");
    &:nth-child(4n + 1) {
      border-left: none;
    }
  }
}
</style>
